<template>
	<view class="app-container">
		<!-- 	<view class="page-head white-font">
			<uni-icons class="gap-top" type="arrow-left" color="white" size="30" @click="goBack" v-show="back"></uni-icons>
			车厢
		</view> -->
		<view class="page-head">
			<text class="white-font gap-top">车厢</text>
		</view>
		<view class="nav">
			<view class="txt" @click="tabChange('package-list')" :class="[active=='package-list'?'select':'']">背包
			</view>
			<view class="txt" @click="tabChange('package-deliver')" :class="[active=='package-deliver'?'select':'']">
				发货记录
			</view>
			<view class="allcheck" @click="allcheck" v-if="active=='package-list'&&packageList.length>0">
				<view class="checkimg" :class="[showall?'select':'']">
					<image style="width: 24rpx;height: 18rpx;" src="/static/owo/selecticon.png"></image>
				</view>
				<text class="text">{{showall?'取消':'全选'}}</text>
			</view>
		</view>
		<view class="package-box" style="padding-bottom: 120rpx" v-if="active=='package-list'">
			<view v-for="(item, index) in packageList" :key="index" class="gift-box">
				<view class="image-box" @click="selectitem(item, index)">
					<van-image width="100%" height="100%" :src="item.image"></van-image>
					<view class="lockbg" v-if="item.is_lock">
						<image class="selecticon" src="/static/owo/lockicon.png">
						</image>
					</view>

					<!-- <template v-else> -->
					<view class="selectbg" :class="[item.select?'select':'']">
						<image class="selecticon1" src="/static/owo/selecticon.png" v-if="item.select">
						</image>
					</view>

					<!-- </template> -->
				</view>
				<view class="white-content title">{{ item.name }}</view>
				<view class="white-content price price-tuple">
					<view>
						动车票：{{ item.price }}
					</view>
					<view>
						数量：{{ item.count }}
					</view>
				</view>
			</view>
		</view>


		<view class="apply-box" style="padding-bottom: 90rpx" v-if="active=='package-deliver'">
			<view v-for="(item, index) in packageApplyList" :key="index" class="apply-item-box"
				v-on:click="gotoDetail(item)">
				<view class="apply-item">
					<image :src="item.image" style="border-radius: 6rpx;width:162rpx;height: 162rpx;"></image>
					<view class="apply-item-info">
						<text class="white-font name">{{ item.name }}<text
								class="white-font">x{{ item.count }}</text></text>
						<text class="deliver_num">订单编号:{{ item.deliver_num }}</text>
						<view class="deliver_num">物流单号:{{ item.logistics }}
							<van-button v-if="item.logistics_state === '已发货'" round size="mini" color="#4D4D4D"
								@tap.stop="copyLogistics(item)">
								<text class="white-content"> 复制 </text>
							</van-button>
						</view>
						<view class="logistics-deliver">
							{{item.logistics_state}}
						</view>
					</view>
					
				</view>

			</view>
		</view>

		<!-- <van-tab title="" name="package-break">
				<view class="package-box" style="padding-bottom: 90rpx">
					<view v-for="(item, index) in packageBreakList" :key="index" class="gift-box">
						<view class="image-box">
							<van-image width="100%" height="100%" :src="item.image"></van-image>
							<view class="time">{{ item.created_at }}</view>
						</view>
						<view class="white-content title">{{ item.name }}</view>
						<view class="white-content price price-tuple">
							<view>
								动车票：{{ item.price }}
							</view>
							<view>
								数量：{{ item.count }}
							</view>
						</view>
					</view>
				</view>
			</van-tab> -->
		<view class="op_bottom" v-if="showedit > -1">
			<image src="/static/owo/lock.png" class="iconitem" mode="widthFix" @click="lock">
			</image>
			<image src="/static/owo/unlock.png" class="iconitem" mode="widthFix" @click="unlock">
			</image>
			<image src="/static/owo/send.png" class="iconitem" mode="widthFix" @click="showDg(1)">
			</image>
			<!-- 	<image src="/static/owo/fenjie.png" class="iconitem" mode="widthFix" @click="showDg(2)">
			</image> -->
			<!-- <image src="/static/owo/selectall.png" class="iconitem" mode="widthFix" @click="allcheck">
			</image> -->
		</view>
		<view class="empty-page" v-if="packageList.length==0&&activeTab=='package-list'">
			<view class="nofull">
				<image src="/static/owo/nofull.png" class="nofullimg"></image>
				<text class="notitle">暂无数据</text>
			</view>
		</view>
		<view class="empty-page" v-if="packageApplyList.length==0&&activeTab=='package-deliver'">
			<view class="nofull">
				<image src="/static/owo/nofull.png" class="nofullimg"></image>
				<text class="notitle">暂无数据</text>
			</view>
		</view>
		<van-popup position="bottom" :show="show"
			custom-style="background-color:#42424E;border-radius: 20rpx 20rpx 0 0 ;" @close="onClose">
			<view class="orderbg">
				<view class="toptitle">
					<text class="paytitle">选择数量</text>
					<image class="close" @click="onClose" src="../../static/pay-close.png"></image>
				</view>

				<scroll-view scroll-y="true" style="height: 800rpx">
					<view style="height: 800rpx">
						<view class="center_c" v-for="(item, index) in list" :key="index">
							<view class="imagebg" @click="selectitem(item, index)">
								<van-image radius="10" width="100%" height="100%" :src="item.image"></van-image>
							</view>
							<view class="content_r_c">
								<text class="content_r_c_t">{{ item.name }} </text>
								<view class="op_b_bg">
									<view class="content_r_t">
										<text>拥有数量</text>
										<text>{{ item.count }}</text>
									</view>
									<view class="opbtn">
										<button class="btn" @click="reduce(index)">-</button>
										<view class="num">{{ item.num }}</view>
										<button class="btn" @click="add(index)">+</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="allsum">已选数量：<text class="red">{{ allnum.num }}</text>，总计：<text
						class="red">{{ allnum.price }}</text></view>
				<!-- <view class="paybtn" @click="submit"> 确认 </view> -->
				<view style="text-align: center;" class="btnok">
					<image class="btntext" src="/static/owo/address-confirm-btn1.png"  @click="submit"></image>
				</view>
			</view>
		</van-popup>
		<tarbar :active="2"></tarbar>
	</view>
</template>

<script>
	import moment from "moment";
	import tarbar from '@/wxcomponents/tarbar'
	import {
		listPackage,
		listPackageApply,
		listPackageBreak,
		packagelock,
		packageunlock,
		packagebreak,
	} from "@/api/package";

	export default {
		components: {
			tarbar
		},
		data() {
			return {
				active: "package-list",
				show: false,
				// 顶部
				showBackBtn: true,
				activeTab: "package-list",

				// 未申请
				packageList: [], //默认的背包列表
				// 已申请
				packageApplyList: [],
				// 已分解
				packageBreakList: [],
				list: [], //选中的列表
				type: 1,
				allselected: false,
				page1: 1,
				page2: 1,
				total: 0,
				total1: 0,
				loading: false,
				loading1: false,
			};
		},
		onShow: async function(options) {
			await this.listPackage();
			uni.$off("reset");
			uni.$on("reset", (res) => {
				this.listPackage();
			});
		},
		onReachBottom() {
			if (this.activeTab === "package-deliver") {
				if (this.packageApplyList.length < this.total) {
					++this.page1
					this.listPackageApply();
				}
			} else if (this.activeTab === "package-break") {
				if (this.packageBreakList.length < this.total1) {
					++this.page2
					this.listPackageBreak();
				}
			}
		},
		computed: {
			allnum() {
				let num = 0,
					price = 0;
				this.list.map((item, index) => {
					num += item.num;
					price += parseInt(item.num) * parseInt(item.price);
				});
				return {
					num: num,
					price: price,
				};
			},
			showedit() {
				var index = this.packageList.findIndex((item) => item.select)
				return this.packageList.findIndex((item) => item.select);
			},
			showall() {
				var index = 0
				this.packageList.map((item) => {
					if (item.select) {
						++index
					}
				})
				return this.packageList.length == index;
			},
		},
		async onPullDownRefresh() {
			await this.tabChange(this.activeTab)
			uni.stopPullDownRefresh()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			showDg(type) {
				this.type = type;
				this.show = !this.show;
				this.list = this.packageList.filter((item, index) => {
					if (item.select && !item.is_lock) {
						item.num = item.count;
						return item;
					}
				});
			},
			submit() {
				this.show = !this.show;
				if (this.type == 1) {
					uni.setStorageSync("sendlist", this.returnIds(true));
					uni.navigateTo({
						url: `/pages/subPackage/createdorder?type=2`,
					});
				} else {
					this.dissolve();
				}
			},
			reduce(i) {
				this.list = this.list.filter((item, index) => {
					if (index == i) {
						if (item.num <= item.count && item.num > 1) {
							item.num -= 1;
						}
					}
					return item;
				});
			},
			add(i) {
				this.list = this.list.filter((item, index) => {
					if (index == i) {
						if (item.num < item.count) {
							item.num += 1;
						}
					}
					return item;
				});
			},
			returnIds(rnum = false) {
				let ids = [];
				if (!rnum) {
					this.packageList = this.packageList.map((item, index) => {
						if (item.select) {
							ids.push(item.id);
						}
						return item;
					});
				} else {
					this.list = this.list.map((item, index) => {
						ids.push({
							id: item.id,
							count: item.num,
							price: item.price,
							image: item.image,
							name: item.name,
						});
						return item;
					});
				}
				return ids;
			},
			// 解锁
			unlock() {
				let ids = this.returnIds();
				if (ids.length > 0) {
					uni.showLoading();
					packageunlock({
						ids: ids,
					}).then((res) => {
						if (res.code == 0) {
							this.listPackage();
						}
						uni.hideLoading();
					});
				}
			},
			// 加锁
			lock() {
				let ids = this.returnIds();
				if (ids.length > 0) {
					uni.showLoading();
					packagelock({
						ids: ids,
					}).then((res) => {
						if (res.code == 0) {
							this.listPackage();
						}
						uni.hideLoading();
					});
				}
			},
			// 开始分解
			dissolve() {
				let ids = this.returnIds(true);
				if (ids.length > 0) {
					uni.showLoading();
					packagebreak({
						items: ids,
					}).then((res) => {
						uni.hideLoading();
						if (res.code == 0) {
							uni.showToast({
								title: '分解成功',
								icon: "none",
								duration: 3000
							})
							this.listPackage();
						}
					}).catch((err) => {
						uni.hideLoading();
					})
				}
			},
			allcheck() {
				this.allselected = !this.allselected
				this.packageList = this.packageList.filter((item, index) => {
					item.select = this.allselected;
					return item;
				});
			},
			onClose() {
				this.show = false;
			},
			selectitem(item, i) {
				this.packageList = this.packageList.filter((item, index) => {
					if (index == i) {
						item.select = !item.select;
					}
					return item;
				});
			},
			// tab切换
			async tabChange(tabName) {
				this.active = tabName
				if (tabName === "package-list") {
					await this.listPackage();
				} else if (tabName === "package-deliver") {
					this.page1 = 1
					await this.listPackageApply();
				} else if (tabName === "package-break") {
					this.page2 = 1
					await this.listPackageBreak();
				}
				if (tabName !== "package-list") {
					this.packageList = this.packageList.filter((item, index) => {
						item.select = false;
					});
				}
				this.activeTab = tabName
			},

			// 未申请
			async listPackage() {
				const res = await listPackage();
				const data = res.data || {};
				const items = data.items || [];
				for (let i = 0; i < items.length; i++) {
					items[i]["price"] = Number(items[i]["price"] || 0) / 10
					items[i]["select"] = false;
					items[i]["num"] = items[i]["count"];
				}
				this.packageList = items;
				console.log(items);
			},

			// 已申请
			async listPackageApply() {
				if (this.loading) {
					return
				}
				this.loading = true
				var obj = {
					page: this.page1,
					size: 10
				}
				const res = await listPackageApply(obj);
				const data = res.data || {};
				var items = data.items || [];
				if (this.page1 == 1) {
					this.packageApplyList = items
				} else {
					this.packageApplyList = this.packageApplyList.concat(items);
				}
				this.total = data.total
				this.loading = false
			},
			gotoDetail(item) {
				uni.navigateTo({
					url: `/pages/package/detail?id=${item.id}`,
				});
			},
			// 已分解
			async listPackageBreak() {
				if (this.loading1) {
					return
				}
				var obj = {
					page: this.page2,
					size: 20
				}
				this.loading1 = true
				const res = await listPackageBreak(obj);
				const data = res.data || {};
				const items = data.items || [];
				for (let i = 0; i < items.length; i++) {
					const timeObj = moment(items[i]["created_at"]);
					items[i]["created_at"] = timeObj.format("YYYY-MM-DD HH:mm:ss");
					items[i]["price"] = Number(items[i]["price"] || 0) / 10
				}
				if (this.page2 == 1) {
					this.packageBreakList = items
				} else {
					this.packageBreakList = this.packageBreakList.concat(items);
				}
				this.total1 = data.total
				this.loading1 = false
			},
			copyLogistics(row) {
				uni.setClipboardData({
					data: row.logistics, // 设置要复制的文本内容
					success(res) {
						uni.showToast({
							title: "物流单号已复制",
							icon: "none",
							duration: 3000,
						});
					},
					fail(err) {
						console.error("复制失败", err);
					},
				});
			},
		},
	};
</script>

<style lang="scss">
	@import "src/static/scss/common";
	.nav {
		display: flex;
		// justify-content: space-around;
		margin: 20rpx 0 0;
		align-items: flex-start;
		height: 80rpx;
		box-sizing: border-box;
		padding-left: 40rpx;
		position: relative;

		.txt {
			margin-right: 50rpx;
			display: inline-block;
			width: 132rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			position: relative;
			color: #ffffff;
			font-size: 28rpx;
		}

		.select {
			background-image: url("/static/owo/navselect.png");
			background-position: 0 0;
			background-repeat: no-repeat;
			background-size: 100%;
		}
	}

	.page-head {
		display: flex;
		gap: 10px;
		width: 100vw;
		line-height: 88px;
	}

	.allsum {
		text-align: center;
		width: 100%;
		color: #ffffff;
		font-size: 28rpx;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
	}

	.red {
		color: #FFDD86;
	}

	.paybtn {
		font-size: 32rpx;
		width: 702rpx;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #666666;
		color: #ffffff;
		text-align: center;
	}

	.op_b_bg {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.opbtn {
		color: #ffffff;
		display: flex;
		justify-content: space-between;
		background-color: #33331D;
		border-radius: 10rpx;

		.num {
			width: 98rpx;
			height: 56rpx;
			text-align: center;
			line-height: 56rpx;
		}
	}

	.btn {
		color: #7A5E15;
		width: 60rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		background-color: #FFDD86;
		padding: 0;
	}

	.imagebg {
		height: 176rpx;
		width: 176rpx;
	}

	.orderbg {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		// background-color: #545454;
		border-radius: 20rpx 20rpx 0 0;
		max-height: 1116rpx;
	}

	.toptitle {
		width: 100%;
		height: 110rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.paytitle {
		color: #ffffff;
		font-size: 28rpx;
	}

	.close {
		width: 48rpx;
		height: 48rpx;
	}

	.center_c {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #18181C;
		border-radius: 12rpx;
		margin-bottom: 8rpx;
		padding: 40rpx 40rpx;
		box-sizing: border-box;
	}

	.contetn_l_img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 8rpx;
		border: solid 2rpx #5e5e5e;
	}

	.content_r_c {
		flex: 1;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		color: #ffffff;
		justify-content: space-between;
	}

	.content_r_c_t {
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.content_r_t {
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.center_z {
		padding: 24rpx;
		line-height: 32rpx;
		font-size: 20rpx;
		color: #ffffff;
		margin-bottom: 80rpx;
		background-color: #000000;
	}

	.op_bottom {
		width: 126rpx;
		position: fixed;
		right: 40rpx;
		bottom: 180rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.iconitem {
		width: 126rpx;
		height: 126rpx;
		margin-bottom: 20rpx;
	}

	.app-container {
		flex-direction: column;
	}

	/* 标签栏样式 */
	.menu-tabs .van-tab--active {
		color: #ffffff;
		/* 字体颜色 */
		// background-color: #ff8917;
		/* 标签背景颜色 */
		border-radius: 40px;
		/* 圆角标签背景 */
	}

	.menu-tabs {
		.van-tabs__line {
			background-color: #ff55ff;
			/* 线条颜色 */
			width: 40px;
			/*宽度 */
			// height: 10px;
			/* 高度 */
			border-radius: 40px;
			/* 圆角 */
		}

		--tabs-nav-background-color: rgba(10, 5, 11, 1);
	}

	// 未申请
	.package-box {
		padding-top: 20rpx;
		// background: #0a050b;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;

		.gift-box {
			width: 220rpx;
			padding-left: 24rpx;
			margin-bottom: 24rpx;
		}

		.image-box {
			position: relative;
			height: 220rpx;
			width: 220rpx;
			padding: 20rpx;
			background-image: url("@/static/owo/package-gift-box.png");
			background-repeat: no-repeat;
			background-size: contain;
			box-sizing: border-box;
			margin-bottom: 12rpx;
		}

		.title {
			width: 220rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			color: #ffffff;
		}

		.price-tuple {
			display: flex;
			justify-content: space-between;
		}

		.price {
			color: #ffffff;
			margin-top: 8rpx;
			font-size: 20rpx;
		}
	}

	// 已申请
	.apply-box {
		// background: #0a050b;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20rpx 24rpx;

		.apply-item-box {
			width: 100%;
			height: 220rpx;
			margin-bottom: 24rpx;
			background-color: #42424E;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.apply-item {
		display: flex;
		flex-direction: row;
		margin-left: 24rpx;
		width: 100%;
		.apply-item-info {
			padding-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			position: relative;
			.name {
				font-size: 28rpx;
			}
		}

		.deliver_num {
			color: rgba(255, 255, 255, 0.65);
			font-size: 22rpx;
			display: inline-block;
		}
		.logistics-deliver {
			color: #FFDD86;
			font-size: 24rpx;
			position: absolute;
			right: 20rpx;
			top: 0rpx;
		}
	}
	


	.time {
		position: absolute;
		left: 20rpx;
		bottom: 20rpx;
		color: #fff;
		width: 184rpx;
		background-color: rgba(0, 0, 0, 0.7);
		font-size: 18rpx;
	}

	.lockbg {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		width: 34rpx;
		height: 34rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.7);
	}

	.selecticon {
		width: 18rpx;
		height: 24rpx;
	}

	.selectbg {
		position: absolute;
		left: 0rpx;
		bottom: 4rpx;
		width: 28rpx;
		height: 28rpx;
		border: solid 2rpx rgba(254, 243, 187, 1);

		.selecticon1 {
			position: absolute;
			left: 50%;
			top: 5rpx;
			transform: translateX(-50%);
			width: 24rpx;
			height: 18rpx;
		}
	}

	.selectbg.select {
		background-color: rgba(254, 243, 187, 1);
	}

	.allcheck {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);

		.checkimg {
			margin-right: 10rpx;
			width: 28rpx;
			height: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: row;
			border: solid 2rpx rgba(254, 243, 187, 1);
		}

		.checkimg.select {
			background: rgba(254, 243, 187, 1);
		}

		.text {
			color: rgba(255, 238, 197, 1);
			font-size: 24rpx;
		}
	}

	.btnok {
		width: 90%;
		margin-left: 5%;

		.btntext {
			flex: 1;
			width: 100%;
			height: 84rpx;
			color: #7A5E15;
		}
	}
</style>